<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../node_modules/jquery-colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../node_modules/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>Big images test</h1>
    <p>
        With Chrome DevTools slow down connection. 
        The images provided in the img srv are loaded first.
        Only after they are loaded JG is able to build the layout because waitThumbnailsLoad is not used here.
        Then much the images with more resolution should be loaded after.
        The first image has width and height assigned, so it should look as the assigned size initially.
    </p>
    <div id="bigimages">
        <a href="../photos/8083451788_552becfbc7_b.jpg" title="What's your destination?">
            <img width="928" height="619" src="../photos/8083451788_552becfbc7_m.jpg" />
        </a>
        <a href="../photos/7948632554_01f6ae6b6f_b.jpg" title="Just in a dream Place">
            <img src="../photos/7948632554_01f6ae6b6f_m.jpg" />
        </a>
        <a href="../photos/7302459122_19fa1d8223_b.jpg" title="Truthful Innocence">
            <img src="../photos/7302459122_19fa1d8223_m.jpg" />
        </a>
        <a href="../photos/7222046648_5bf70e893a_b.jpg" title="Simply my Brother">
            <img src="../photos/7222046648_5bf70e893a_m.jpg" />
        </a>
        <a href="../photos/7002395006_29fdc85f7a_b.jpg" title="Freedom">
            <img src="../photos/7002395006_29fdc85f7a_m.jpg" />
        </a>
        <a href="../photos/7062575651_b23918b11a_b.jpg" title="Maybe spring">
            <img src="../photos/7062575651_b23918b11a_m.jpg" />
        </a>
    </div>
    
    <!-- bower:js -->
    <script src="../../node_modules/jquery/dist/jquery.js"></script>
    <script src="../../node_modules/jquery-colorbox/jquery.colorbox.js"></script>
    <script src="../../node_modules/swipebox/src/js/jquery.swipebox.min.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
    $("#bigimages").justifiedGallery({
        rowHeight: 1000,
        sizeRangeSuffixes: {
            'lt100': '_t',
            'lt240': '_m',
            'lt320': '_n',
            'lt500': '',
            'lt640': '_z',
            'lt1024': '_b'
        },
    });
    </script>
</body>

</html>
